<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车 - B2B电商平台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0E2E8B',
            neutral: {
              100: '#F5F7FA',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#272E3B',
              700: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .quantity-btn {
        @apply w-8 h-8 flex items-center justify-center border border-neutral-200 rounded hover:border-primary hover:text-primary transition-all;
      }
      .product-row-hover {
        @apply hover:bg-neutral-50 transition-colors;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <!-- 页面标题和操作栏 -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
      <div>
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">购物车</h1>
        <p class="text-neutral-500">您可以在这里管理您的采购商品</p>
      </div>
      <div class="flex items-center gap-3">
        <a href="#" class="inline-flex items-center text-primary hover:underline">
          <i class="fa fa-arrow-left mr-1"></i> 返回商品列表
        </a>
        <button class="text-neutral-500 hover:text-red-500 transition-colors">
          <i class="fa fa-trash-o mr-1"></i> 清空购物车
        </button>
      </div>
    </div>
    
    <!-- 购物车主体内容 -->
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 购物车商品列表 -->
      <div class="lg:w-2/3 w-full space-y-6">
        <!-- 购物车有商品状态 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <!-- 列表标题栏 -->
          <div class="hidden md:flex bg-neutral-50 px-6 py-4 border-b border-neutral-200 text-neutral-500 text-sm">
            <div class="w-1/12"><input type="checkbox" checked class="w-5 h-5 text-primary border-neutral-300 rounded focus:ring-primary"></div>
            <div class="w-5/12">商品信息</div>
            <div class="w-2/12 text-center">单价</div>
            <div class="w-2/12 text-center">数量</div>
            <div class="w-1/12 text-right">小计</div>
            <div class="w-1/12 text-center">操作</div>
          </div>
          
          <!-- 商品列表 -->
          <div class="divide-y divide-neutral-200">
            <!-- 商品1 -->
            <div class="p-6 product-row-hover">
              <div class="flex flex-col md:flex-row gap-4">
                <!-- 复选框 -->
                <div class="md:w-1/12 flex items-start">
                  <input type="checkbox" checked class="w-5 h-5 text-primary border-neutral-300 rounded focus:ring-primary mt-1">
                </div>
                
                <!-- 商品信息 -->
                <div class="md:w-5/12 flex gap-4">
                  <img src="https://picsum.photos/120/120?random=1" alt="工业级精密万用表" class="w-20 h-20 object-cover rounded-md flex-shrink-0">
                  <div>
                    <h3 class="font-medium mb-2">工业级精密万用表 数字数显多功能电工仪表</h3>
                    <p class="text-neutral-500 text-sm mb-2">规格：UT890C | 品牌：优利德</p>
                    <div class="flex flex-wrap items-center text-sm text-neutral-500 gap-y-1">
                      <span class="mr-4"><i class="fa fa-warehouse mr-1"></i> 上海仓</span>
                      <span><i class="fa fa-truck mr-1"></i> 今日21:00前下单，次日送达</span>
                    </div>
                  </div>
                </div>
                
                <!-- 单价 -->
                <div class="md:w-2/12 flex items-center md:justify-center">
                  <div class="text-right md:text-center w-full">
                    <p class="font-medium">¥450.00</p>
                    <p class="text-xs text-neutral-500 md:hidden">单价</p>
                  </div>
                </div>
                
                <!-- 数量 -->
                <div class="md:w-2/12 flex items-center justify-center">
                  <div class="flex items-center border border-neutral-200 rounded">
                    <button class="quantity-btn" data-action="decrease">-</button>
                    <input type="number" value="2" min="1" class="w-12 h-8 text-center border-x border-neutral-200 focus:outline-none">
                    <button class="quantity-btn" data-action="increase">+</button>
                  </div>
                </div>
                
                <!-- 小计 -->
                <div class="md:w-1/12 flex items-center justify-end">
                  <p class="font-medium">¥900.00</p>
                </div>
                
                <!-- 操作 -->
                <div class="md:w-1/12 flex items-center justify-center">
                  <button class="text-neutral-400 hover:text-red-500 transition-colors">
                    <i class="fa fa-trash-o"></i>
                    <span class="ml-1 text-sm hidden md:inline">删除</span>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 商品2 -->
            <div class="p-6 product-row-hover">
              <div class="flex flex-col md:flex-row gap-4">
                <!-- 复选框 -->
                <div class="md:w-1/12 flex items-start">
                  <input type="checkbox" checked class="w-5 h-5 text-primary border-neutral-300 rounded focus:ring-primary mt-1">
                </div>
                
                <!-- 商品信息 -->
                <div class="md:w-5/12 flex gap-4">
                  <img src="https://picsum.photos/120/120?random=2" alt="高清工业内窥镜" class="w-20 h-20 object-cover rounded-md flex-shrink-0">
                  <div>
                    <h3 class="font-medium mb-2">高清工业内窥镜 管道检测摄像头 5.5mm探头</h3>
                    <p class="text-neutral-500 text-sm mb-2">规格：3米有线 | 品牌：博世</p>
                    <div class="flex flex-wrap items-center text-sm text-neutral-500 gap-y-1">
                      <span class="mr-4"><i class="fa fa-warehouse mr-1"></i> 苏州仓</span>
                      <span><i class="fa fa-truck mr-1"></i> 2-3天送达</span>
                    </div>
                  </div>
                </div>
                
                <!-- 单价 -->
                <div class="md:w-2/12 flex items-center md:justify-center">
                  <div class="text-right md:text-center w-full">
                    <p class="font-medium">¥1,280.00</p>
                    <p class="text-xs text-neutral-500 md:hidden">单价</p>
                  </div>
                </div>
                
                <!-- 数量 -->
                <div class="md:w-2/12 flex items-center justify-center">
                  <div class="flex items-center border border-neutral-200 rounded">
                    <button class="quantity-btn" data-action="decrease">-</button>
                    <input type="number" value="1" min="1" class="w-12 h-8 text-center border-x border-neutral-200 focus:outline-none">
                    <button class="quantity-btn" data-action="increase">+</button>
                  </div>
                </div>
                
                <!-- 小计 -->
                <div class="md:w-1/12 flex items-center justify-end">
                  <p class="font-medium">¥1,280.00</p>
                </div>
                
                <!-- 操作 -->
                <div class="md:w-1/12 flex items-center justify-center">
                  <button class="text-neutral-400 hover:text-red-500 transition-colors">
                    <i class="fa fa-trash-o"></i>
                    <span class="ml-1 text-sm hidden md:inline">删除</span>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 商品3 -->
            <div class="p-6 product-row-hover">
              <div class="flex flex-col md:flex-row gap-4">
                <!-- 复选框 -->
                <div class="md:w-1/12 flex items-start">
                  <input type="checkbox" class="w-5 h-5 text-primary border-neutral-300 rounded focus:ring-primary mt-1">
                </div>
                
                <!-- 商品信息 -->
                <div class="md:w-5/12 flex gap-4">
                  <img src="https://picsum.photos/120/120?random=3" alt="智能工业控制器" class="w-20 h-20 object-cover rounded-md flex-shrink-0">
                  <div>
                    <h3 class="font-medium mb-2">智能工业控制器 PLC编程模块 以太网接口</h3>
                    <p class="text-neutral-500 text-sm mb-2">规格：16点输入 | 品牌：西门子</p>
                    <div class="flex flex-wrap items-center text-sm text-neutral-500 gap-y-1">
                      <span class="mr-4"><i class="fa fa-warehouse mr-1"></i> 北京仓</span>
                      <span><i class="fa fa-truck mr-1"></i> 3-5天送达</span>
                    </div>
                  </div>
                </div>
                
                <!-- 单价 -->
                <div class="md:w-2/12 flex items-center md:justify-center">
                  <div class="text-right md:text-center w-full">
                    <p class="font-medium">¥2,500.00</p>
                    <p class="text-xs text-neutral-500 md:hidden">单价</p>
                  </div>
                </div>
                
                <!-- 数量 -->
                <div class="md:w-2/12 flex items-center justify-center">
                  <div class="flex items-center border border-neutral-200 rounded">
                    <button class="quantity-btn" data-action="decrease">-</button>
                    <input type="number" value="1" min="1" class="w-12 h-8 text-center border-x border-neutral-200 focus:outline-none">
                    <button class="quantity-btn" data-action="increase">+</button>
                  </div>
                </div>
                
                <!-- 小计 -->
                <div class="md:w-1/12 flex items-center justify-end">
                  <p class="font-medium">¥2,500.00</p>
                </div>
                
                <!-- 操作 -->
                <div class="md:w-1/12 flex items-center justify-center">
                  <button class="text-neutral-400 hover:text-red-500 transition-colors">
                    <i class="fa fa-trash-o"></i>
                    <span class="ml-1 text-sm hidden md:inline">删除</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 批量操作栏 -->
          <div class="p-6 bg-neutral-50 border-t border-neutral-200">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
              <div class="flex items-center">
                <label class="flex items-center mr-6 cursor-pointer">
                  <input type="checkbox" checked class="w-5 h-5 text-primary border-neutral-300 rounded focus:ring-primary mr-2">
                  <span>全选</span>
                </label>
                <button class="text-neutral-500 hover:text-red-500 transition-colors mr-6">
                  <i class="fa fa-trash-o mr-1"></i> 删除选中
                </button>
                <button class="text-neutral-500 hover:text-primary transition-colors">
                  <i class="fa fa-refresh mr-1"></i> 刷新库存
                </button>
              </div>
              <button class="px-4 py-2 border border-neutral-200 rounded-lg hover:border-primary hover:text-primary transition-all">
                继续采购
              </button>
            </div>
          </div>
        </div>
        
        <!-- 推荐商品 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-lg font-bold mb-6">为您推荐</h2>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 推荐商品1 -->
            <div class="border border-neutral-200 rounded-lg overflow-hidden card-hover">
              <div class="p-4">
                <img src="https://picsum.photos/200/200?random=10" alt="红外测温仪" class="w-full h-48 object-cover rounded-md mb-3">
                <h3 class="font-medium mb-2 line-clamp-2">工业级红外测温仪 高精度非接触式温度计</h3>
                <p class="text-neutral-500 text-sm mb-3">品牌：福禄克 | 测量范围：-50~500℃</p>
                <div class="flex justify-between items-center">
                  <span class="font-bold text-lg">¥680.00</span>
                  <button class="px-3 py-1 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all text-sm">
                    <i class="fa fa-plus mr-1"></i> 加入购物车
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 推荐商品2 -->
            <div class="border border-neutral-200 rounded-lg overflow-hidden card-hover">
              <div class="p-4">
                <img src="https://picsum.photos/200/200?random=11" alt="数字示波器" class="w-full h-48 object-cover rounded-md mb-3">
                <h3 class="font-medium mb-2 line-clamp-2">数字存储示波器 双通道便携示波器 100MHz</h3>
                <p class="text-neutral-500 text-sm mb-3">品牌：泰克 | 采样率：1GS/s</p>
                <div class="flex justify-between items-center">
                  <span class="font-bold text-lg">¥3,299.00</span>
                  <button class="px-3 py-1 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all text-sm">
                    <i class="fa fa-plus mr-1"></i> 加入购物车
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 推荐商品3 -->
            <div class="border border-neutral-200 rounded-lg overflow-hidden card-hover">
              <div class="p-4">
                <img src="https://picsum.photos/200/200?random=12" alt="绝缘电阻测试仪" class="w-full h-48 object-cover rounded-md mb-3">
                <h3 class="font-medium mb-2 line-clamp-2">绝缘电阻测试仪 高精度兆欧表 数字摇表</h3>
                <p class="text-neutral-500 text-sm mb-3">品牌：胜利 | 测试电压：2500V</p>
                <div class="flex justify-between items-center">
                  <span class="font-bold text-lg">¥890.00</span>
                  <button class="px-3 py-1 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all text-sm">
                    <i class="fa fa-plus mr-1"></i> 加入购物车
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 订单结算区域 -->
      <div class="lg:w-1/3 w-full">
        <div class="bg-white rounded-xl shadow-sm p-6 sticky top-6">
          <h2 class="text-lg font-bold mb-6 pb-3 border-b border-neutral-200">订单摘要</h2>
          
          <div class="space-y-3 mb-6">
            <div class="flex justify-between">
              <span class="text-neutral-500">商品总价 (3件)</span>
              <span>¥2,180.00</span>
            </div>
            <div class="flex justify-between">
              <span class="text-neutral-500">运费</span>
              <span>¥0.00</span>
            </div>
            <div class="flex justify-between">
              <span class="text-neutral-500">增值税(13%)</span>
              <span>¥283.40</span>
            </div>
            <div class="flex justify-between text-green-600">
              <span>会员折扣</span>
              <span>-¥109.00</span>
            </div>
            <div class="flex justify-between text-orange-600">
              <span>优惠券</span>
              <span>-¥50.00</span>
            </div>
          </div>
          
          <div class="border-t border-neutral-200 pt-4">
            <div class="flex justify-between items-center mb-6">
              <div>
                <span class="text-neutral-500">应付总额</span>
                <p class="text-2xl font-bold text-primary">¥2,204.40</p>
              </div>
            </div>
            
            <!-- 优惠券 -->
            <div class="mb-6">
              <button class="w-full flex justify-between items-center px-4 py-3 border border-dashed border-neutral-300 rounded-lg hover:border-primary hover:text-primary transition-all">
                <div class="flex items-center">
                  <i class="fa fa-ticket text-orange-500 mr-2"></i>
                  <span>优惠券</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-neutral-500 mr-2">已选1张</span>
                  <i class="fa fa-angle-right"></i>
                </div>
              </button>
            </div>
            
            <!-- 结算按钮 -->
            <button class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all text-lg font-medium mb-3 flex items-center justify-center">
              <i class="fa fa-check-circle mr-2"></i> 提交订单
            </button>
            
            <button class="w-full px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-all">
              <i class="fa fa-file-text-o mr-2"></i> 生成报价单
            </button>
            
            <div class="mt-4 pt-4 border-t border-neutral-200 flex items-center justify-center text-sm text-neutral-500">
              <i class="fa fa-lock mr-1 text-green-500"></i>
              安全支付 | 正品保障 | 7天无理由退换
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // 数量调整功能
    document.querySelectorAll('.quantity-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const action = this.getAttribute('data-action');
        const input = this.parentElement.querySelector('input');
        let currentValue = parseInt(input.value);
        
        if (action === 'increase') {
          input.value = currentValue + 1;
        } else if (action === 'decrease' && currentValue > 1) {
          input.value = currentValue - 1;
        }
        
        // 触发输入事件，以便后续可以添加价格更新逻辑
        input.dispatchEvent(new Event('input'));
      });
    });
    
    // 输入框数量变化处理
    document.querySelectorAll('input[type="number"]').forEach(input => {
      input.addEventListener('input', function() {
        // 确保值不为空且不小于1
        if (!this.value || this.value < 1) {
          this.value = 1;
        }
        
        // 这里可以添加更新小计和总计的逻辑
        updateSubtotal(this);
      });
    });
    
    // 全选功能
    const selectAllCheckbox = document.querySelector('input[type="checkbox"]:first-of-type');
    selectAllCheckbox.addEventListener('change', function() {
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
      });
    });
    
    // 更新小计金额
    function updateSubtotal(quantityInput) {
      // 找到对应的单价和小计元素
      const productRow = quantityInput.closest('.product-row-hover');
      const priceElement = productRow.querySelector('.md\\:w-2\\/12 .font-medium');
      const subtotalElement = productRow.querySelector('.md\\:w-1\\/12 .font-medium');
      
      // 提取单价数值
      const price = parseFloat(priceElement.textContent.replace('¥', '').replace(',', ''));
      const quantity = parseInt(quantityInput.value);
      
      // 计算小计
      const subtotal = price * quantity;
      
      // 更新小计显示
      subtotalElement.textContent = `¥${subtotal.toFixed(2)}`;
      
      // 更新总计（实际项目中需要实现）
      updateTotal();
    }
    
    // 更新总计金额（示例函数，实际项目中需要完善）
    function updateTotal() {
      // 这里添加更新订单总计的逻辑
      console.log('更新总计金额');
    }
    
    // 删除商品确认
    document.querySelectorAll('.fa-trash-o').forEach(icon => {
      const button = icon.parentElement;
      button.addEventListener('click', function(e) {
        e.preventDefault();
        if(confirm('确定要从购物车中移除该商品吗？')) {
          const productRow = this.closest('.product-row-hover');
          productRow.remove();
          updateTotal();
        }
      });
    });
    
    // 清空购物车确认
    document.querySelector('button:has(.fa-trash-o)').addEventListener('click', function(e) {
      e.preventDefault();
      if(confirm('确定要清空购物车吗？所有商品将被移除。')) {
        // 实际项目中添加清空购物车的逻辑
        alert('购物车已清空');
      }
    });
  </script>
</body>
</html>